import React, {Component, PropTypes} from 'react';

import { message, Button, Table, Icon, Modal } from 'antd';

export default class Step3 extends Component {

  constructor (props) {
    super(props);

    /**
     * table头部
     * @type {*[]}
     */
    this.columns = [{
      title: '学员id',
      width: 40,
      dataIndex: '$loki'
    },{
      title: '学员姓名',
      width: 150,
      dataIndex: 'user_name'
    }, {
      title: '身份证',
      width: 150,
      dataIndex: 'user_idcard'
    },{
      title: '所属地区',
      width: 150,
      dataIndex: 'user_area'
    },{
      title: '所属考场',
      width: 150,
      dataIndex: 'room_name'
    }];

  }

  componentDidMount () {
    const {examActions, exam} = this.props;
    const examdetail = exam && exam.get('examdetail').toJS();

    if(examdetail && examdetail.exam_user_path){
      examActions.getUserList({
        path : examdetail.exam_user_path
      }).then(data=>{

      }).catch(err=>{

      })
    }
  }


  /**
   * 点击上传文件
   */
  handleFileClick () {
    this.refs.myFile.click();
  }

  /**
   * 判断考场能够容纳的人数是否能够容纳这么多学员
   * @returns {number}
   */
  checkRoom (data) {
    const {exam} = this.props;
    const length = data.length;
    const list = exam.get('roomlist') && exam.get('roomlist').toArray();

    let total = 0;
    list.forEach(item=>{
      total += parseInt(item.room_number)
    });
    if(total >= length){
      return true;
    }else{
      Modal.error({
        title: '错误提示',
        content: '添加的考场不能够容纳'+length+'名学员的考试,请返回添加考场'
      });
      return false;
    }
  }

  /**
   * 文件上传
   */
  handleFileChange () {
    const {examActions, $loki} = this.props;
    var filePath = this.refs.myFile.value;
    examActions.postUserUpload({
      $loki,
      filePath
    }).then(data=>{
      if(this.checkRoom(data.info)) message.success('用户导入成功')
    }).catch(err=>{
      message.error(err);
    });
  }

  /**
   * 下一步完成配置
   * @param formdata
   */
  handleFormOk () {
    const {examActions, exam} = this.props;
    const list = exam.get('userList') && exam.get('userList').toArray();
    if(!list || list.length < 1){
      message.error('请导入学员');
      return false;
    }
    const formdata = {
      $loki : this.props.$loki,
      exam_user_path : 'dba/users/user_'+this.props.$loki+'.json'
    };
    if(this.checkRoom(list)){
      examActions.postEditExam(formdata).then(data=>{
        this.props.next();
      }).catch(err=>{
        message.error(err);
      });
    }
  }

  render() {

    const {exam} = this.props;
    const list = exam.get('userList') && exam.get('userList').toArray();

    const pagination = {
      total : list ? list.length : 0,
      pageSize : 20
    }

    return (
      <div className="ant-steps-wraper">

        <div className="steps-content">

          <div className="clearfix">
            <Button className="ant-room-add" type="primary" onClick={this.handleFileClick.bind(this)}>
              <Icon type="folder-add" />
              { pagination.total > 0 ? '重新导入' : '导入学员' }
            </Button>
            <h3>学员列表:</h3>
          </div>
          <input type="file" style={{display:'none'}} ref="myFile" accept=".xlsx" onChange={this.handleFileChange.bind(this)} />

          <div className="ant-table-wraper">
            <Table
              className="ant-room-table"
              bordered
              columns={this.columns}
              dataSource={list}
              pagination={pagination}
            />
            {
              pagination.total > 0 && <div className="ant-table-extend">共导入学员<b>{pagination.total}</b>名</div>
            }
          </div>

        </div>

        <div className="steps-action">
          <Button type="primary" className="ant-next-btn" onClick={() => this.handleFormOk()}>下一步</Button>
          <Button className="ant-previous-btn" onClick={() => this.props.prev()}>
            返回上一步
          </Button>
        </div>

      </div>
    )
  }

}

